<template>
	<view style="padding-bottom: 30rpx;">
		<view class="propereties-statistic">
			<p>本月预算</p>
			<p>{{budgetsTotal}}</p>
		</view>
		<u--form style="margin-left: 40rpx;" labelPosition="left" ref="uForm" labelWidth="90">
			<u-form-item label="查看全部">
				<u-switch v-model="showAll"></u-switch>
			</u-form-item>
		</u--form>
		<u-cell-group style="padding: 0 30rpx;">
			<u-cell v-for="item in budgetsShow" :title="item.budgetName" :value="''+item.value" :label="item.month" @click="toDetail(item)">
			</u-cell>
		</u-cell-group>
		<u-button class="add-budget" size="small" type="primary" @click="openDialog" text="修改"></u-button>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="添加本月预算" value="" placeholder="请输入内容"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		callCloudFunction
	} from '@/api/requests.js'
	export default {
		data() {
			return {
				showAll: false,
				userInfo: {},
				budgetsAll: []
			}
		},
		computed: {
			budgetsShow() {
				const year = new Date().getFullYear()
				const month = new Date().getMonth() + 1
				return this.showAll ? this.budgetsAll : this.budgetsAll.filter(item => {
					return item.month == '' + year + '-' + month
				})
			},
			budgetsTotal() {
				if (!this.budgetsAll.length) {
					return 0
				}
				let budgetsTotal = 0
				const year = new Date().getFullYear()
				const month = new Date().getMonth() + 1
				this.budgetsAll.forEach(budget => {
					if (budget.month == '' + year + '-' + month) {
						budgetsTotal += budget.value
					}
				})
				return budgetsTotal.toFixed(2)
			}
		},
		methods: {
			toDetail(budget) {
				uni.navigateTo({
					url: `/pages/budgetDetail/budgetDetail?_id=` + `${budget._id}`
				});
			},
			getMyBudgets() {
				callCloudFunction('getBudgets', {
						owner: this.userInfo._id
					}, res => {
						this.budgetsAll = res.result.data
					},
					err => {
						uni.showModal({
							content: `获取用户预算失败`,
							showCancel: false
						})
					})
			},
			openDialog() {
				this.$refs.inputDialog.open()
			},
			dialogConfirm(value) {
				const that = this
				const year = new Date().getFullYear()
				const month = new Date().getMonth() + 1
				callCloudFunction('addBudget', {
						owner: that.userInfo._id,
						month: '' + year + '-' + month,
						value: 0,
						budgetName: value
					}, res => {
						uni.showModal({
							content: `新增预算成功`,
							showCancel: false
						})
						that.getMyBudgets()
						this.$refs.inputDialog.close()
					},
					err => {
						uni.showModal({
							content: `新增预算失败`,
							showCancel: false
						})
					})
			}
		},
		mounted() {
			const that = this
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					that.userInfo = res.data
					that.getMyBudgets()
				}
			});
		}
	}
</script>

<style>
	.propereties-statistic {
		height: 18vh;
		width: 100vw;
		background-color: #eee;
		text-align: center;
		padding-top: 4vh;
	}

	.propereties-statistic>p:nth-child(1) {
		font-size: 20px;
		margin-bottom: 2vh;
	}

	.propereties-statistic>p:nth-child(2) {
		color: #555;
	}

	.switch-show-all {
		height: 27px;
		line-height: 27px;
		padding-left: 20rpx;
	}

	.propereties-list {
		margin: 0 15px;
		/* min-height: 70vh; */
		/* box-shadow: 0px 2px 2px 1px #ccc; */
	}

	.properties-item {
		height: 47px;
		line-height: 47px;
		border-bottom: 1px solid #ddd;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.add-budget {
		width: 180rpx;
		margin: 30rpx auto;
	}
</style>
